<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table collapse/expand</title>
<link href="app3.css" type="text/css" rel="stylesheet">
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
	$().ready(function() {
		$('.child').hide();
		$('.summary-row').click(function() {
			var id = $(this).attr('id');
			id = id.split('-');
			$("#detail-" + id[1]).toggle();
			//$("#detail-"+id[1]).slideToggle('slow');
		});
	});
</script>
</head>
<body>
	<br/>
	<table id="data-table">
		<!-- Colgroup -->
		<colgroup>
			<col class="data-table-odd">
			<col class="data-table-even">
			<col class="data-table-odd">
			<col class="data-table-even">
		</colgroup>
		<thead>
			<tr style="background-color: #DDDDDD">
				<th style="width:100px">Year</th>
				<th style="width:250px">Brand</th>
				<th style="width:400px">Model</th>
				<th style="width:100px">Rating</th>
			</tr>
		</thead>
		<tr class="summary-row" id="a-12">
			<td>2010</td>
			<td>My brand</td>
			<td>My Model</td>
			<td>N/A</td>
		</tr>
		<tr id="detail-12" class='child'>
			<td colspan=4" class='detail'>
				<table id="detail-table">
					<tr>
						<th colspan="2">
							Blah blah
						</th>
					</tr>
					<tr>
						<td style="width: 100px">xxxx</td>
						<td>sdasdad</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- Table header -->
		
	</table>

</body>
</html>
